<template>
	<view class="hot-container">
		<!-- mode="aspectFit"保持图片原有尺寸 -->
		<!-- <image src="@/static/images/logo.png" mode="aspectFit" class="logo"></image> -->
		<!-- 可直接使用组件,无需注册 -->
		<view class="search-box">
			<my-search placeholderText="uniapp-搜索"></my-search>
		</view>
		<!-- tabs -->
		<view class="tab-sticky">
			<my-tabs 
			:tabData="tabData"
			:config="{textColor:'#333333'}"
			:defaultIndex="0"
			></my-tabs>
			<!-- list视图 -->
			<!-- 
			1.使用mock数据(假数据)区构建list基本结构
			2.美化样式
			3.根据tab的切换获取真实数据
			4.渲染数据
			5.list 左右切换，与tabs联动
			 -->
			<view >
				<hot-list-item v-for="(item,index) in 50" :key="index"></hot-list-item>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getHotTabs}from '../../api/hot.js'
	export default {
		data() {
			return {
				//tabs数据源
				// tabData:[],
				tabData: [
				  {
				    "id": "0",
				    "label": "热榜"
				  },
				  {
				    "id": "1",
				    "label": "前端"
				  },
				  {
				    "id": "2",
				    "label": "JAVA"
				  },
				  {
				    "id": "3",
				    "label": "PHP"
				  },
				  {
				    "id": "4",
				    "label": "Python"
				  },
				  {
				    "id": "5",
				    "label": "C / C++"
				  },
				  {
				    "id": "6",
				    "label": "数据库"
				  }
				]
			};
		},
		created() {
			this.loadHotTbas();
		},
		methods:{
			// loadHotTbas(){
			// 	uni.request({
			// 	    url: '/dpc/jp/avlist/202861101/1/', //仅为示例，并非真实接口地址。
			// 	    method:'GET',
			// 	    success: (res) => {
			// 	        console.log(res);
				        
			// 	    }
			// 	});
			// }
		    async loadHotTbas(){
			const res = await getHotTabs()
			console.log(res,this.list,'数据');
			// this.tabData=this.list;
			}
		}
	}
</script>

<style lang="scss" scoped>
.hot-container{
	// background-color: $uni-bg-color;
		
	.logo{
		width:100%;
		height:80px;
	}
	.search-box{
		padding: 0 16px;
		margin-bottom: 8px;
	}
	.tab-sticky{
		position:-webkit-sticky;
		position:sticky;
		z-index: 99;
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
	}
}
</style>
